<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/main.css">
		<title>蘑菇街-你的剁手街</title>
	</head>

	<!-- 
	 主题框架
	 
	一些准备工作
	
	结构划分
	 
	 
	细节调整 1
	
	导航栏
	header 搜索栏
	主促销
	
	 7:45 
	 -->
	<body>



		<div class="top-nav clear-float ">

			<div class="container ">

				<div class="lf">
					<a href="#" class="item">首页</a>
				</div>

				<div class="rf">
					<a href="#" class="item">我的订单</a>
					<a href="#" class="item">收藏夹</a>
					<a href="#" class="item">登录</a>
					<a href="#" class="item">注册</a>
					<a href="#" class="item">客户服务</a>
				</div>
			</div>


		</div>

		<div class="header clear-float">

			<div class="container">

				<div class="col-2 logo">
					蘑菇街logo

				</div>

				<div class="col-5 search-bar">
					<input type="text">
					<button type="button" class="search-btn">搜索</button>
				</div>

				<div class="col-3 cart">
					<a href="#"> 我的购物车</a>
					<!-- <button type="button">我的购物车</button> -->
				</div>
			</div>

		</div>

		</div>
		<div class="main-promote clear-float">

			<div class="container">

				<div class="col-2 cat">

					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>

					<div class="item"> item1 / item2</div>
					<div class="item"> item1 / item2</div>
			


				</div>
				<div class="col-6">
					<div class="slider">
						<img src="image/slide_01.png">
					</div>

					<div class="sub-promote">
						<!-- 子促销 -->
						
						<div class="col-5">
							<img src="image/sub-promte-01.png" >
						</div>
						<div class="col-5"><img src="image/sub-promte-02.png" ></div>
						
					</div>

				</div>
				<div class="col-2 userinfo">

					<div class="auth clear-float">

						<div class="avatar">
						</div>
						Hello, whh

						<!-- 登录 注册 -->

					</div>

					<div class="announce">

						<div>公告</div>

						<div class="content">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit incidunt debitis accusamus
							dolorum aspernatur aperiam quae in quibusdam culpa corrupti ut cumque quam facilis at ullam
							laboriosam rem! Sequi sed.
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit incidunt debitis accusamus
							dolorum aspernatur aperiam quae in quibusdam culpa corrupti ut cumque quam facilis at ullam
							laboriosam rem! Sequi sed.
							dolorum aspernatur aperiam quae in quibusdam culpa corrupti ut cumque quam facilis at ullam
						</div>

					</div>

				</div>


			</div>



		</div>
		<div class="cat-promote clear-float">


			<div class="container">

				<div class="col-25">AAAA</div>
				<div class="col-25">AAAA</div>
				<div class="col-25">AAAA</div>
				<div class="col-25">AAAA</div>


			</div>



		</div>




		<div class="cat-promote clear-float">


			<div class="container">

				<div class="col-2">AAA Lo.</div>
				<div class="col-3">AAArem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci sapiente mollitia
					nisi ipsam iure hic. Eligendi quod consectetur eos dolorum optio ab quos earum debitis doloremque
					ipsa tenetur quaerat expeditaA</div>
				<div class="col-2"> Adipisci sapiente mollitia nisi ipsam iure hic. Eligendi quod consectetur eos
					dolorum</div>
				<div class="col-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure libero excepturi
					labore tempora deserunt accusantium fuga nobis tempore. Laborum esse assumenda iure sit repellendus
					eos tempore mollitia ipsa at consequatur.</div>


			</div>



		</div>

		<div class="footer clear-float">

			<div class="container">


				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure eos optio delectus sed illo molestias.
				Maiores harum deleniti accusantium incidunt fuga rem expedita nostrum aperiam corporis accusamus
				necessitatibus temporibus enim?


			</div>
		</div>
	</body>
</html>
